<template>
  <div class="menu">
    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        :default-active="url !== '/' ? url : '/books'"
        text-color="#fff"
        :router="true"
    >
      <el-menu-item index="/books">
        <el-icon><Collection /></el-icon>
        <span>文章</span>
      </el-menu-item>
      <el-menu-item index="/widget">
        <el-icon><Cpu /></el-icon>
        <span>小部件</span>
      </el-menu-item>
      <el-menu-item index="/user">
        <el-icon><UserFilled /></el-icon>
        <span>用户</span>
      </el-menu-item>
      <el-menu-item index="/feedback">
        <el-icon><Service /></el-icon>
        <span>反馈</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import {ref} from "vue"
const url = ref("/" + window.parent.location.href.split(window.location.host)[1].split("/")[2])
</script>

<style scoped>
  .menu{
    position: fixed;
    left: 0;
    top: 0;
    width: 15vw;
    height: 100vh;
  }
  .menu ul{
    height: 100vh;
  }
  .menu a{
    color: inherit;
  }
</style>